<template>
  <div class="pagebg">
	<!-- <div class="topStyle"></div> -->
    <div id="chart1" style="width:100%;height:100%;"></div>
	<div class="topStyle">
		<div class="imgbg"></div>
		<h1 class="center title">天音数据统计分析平台</h1>
		<div class="provinceList">
			<div class="tabs" >
				<div class="province pointer" :class="{'whitetxt':currentPro == index}" @click="chosPro(item,index)" v-for="(item,index) in province" :key="'i'+index"><div class="txt" :class="{'top2':index==1 || index == 5,'top4':index==2 || index == 4,'top6':index==3}">{{item.value}}<span :class="{'icon':currentPro == index}" ></span></div></div>
			</div>
		</div>
	</div>
	<div class="Data floatl">
		<div class="title bom20">小学</div>
		<div class="clearfix">
			<div class="small-l list bom20">
				<div class="txt bom10">付费用户数</div>
				<div class="small-pro bom10"><span>本省</span> <span class="ellipsis" :class=" xiaoxueData.provincePay && (xiaoxueData.provincePay.prev_count > xiaoxueData.provincePay.count) ? 'pro-data' : 'up-data'">{{xiaoxueData.provincePay && xiaoxueData.provincePay.percentage}}</span></div>
				<div class="userNum bom30">{{xiaoxueData.provincePay && xiaoxueData.provincePay.count}}</div>
				<div class="small-pro bom10"><span>全国</span> <span class=" ellipsis"  :class=" xiaoxueData.allPay && (xiaoxueData.allPay.prev_count > xiaoxueData.allPay.count) ? 'pro-data' : 'up-data'">{{ xiaoxueData.allPay && xiaoxueData.allPay.percentage}}</span></div>
				<div class="userNum bom10">{{xiaoxueData.allPay && xiaoxueData.allPay.count}}</div>
			</div>
			<div class="small-r list bom20">
				<div class="txt bom10">活跃用户数</div>
				<div class="small-pro bom10"><span>本省</span> <span class="ellipsis"  :class="xiaoxueData.provinceActive && (xiaoxueData.provinceActive.prev_count > xiaoxueData.provinceActive.count) ? 'pro-data' : 'up-data'">{{xiaoxueData.provinceActive && xiaoxueData.provinceActive.percentage}}</span></div>
				<div class="userNum bom30">{{xiaoxueData.provinceActive && xiaoxueData.provinceActive.count}}</div>
				<div class="small-pro bom10"><span>全国</span> <span class=" ellipsis"  :class="xiaoxueData.allActive && (xiaoxueData.allActive.prev_count > xiaoxueData.allActive.count) ? 'pro-data' : 'up-data'">{{xiaoxueData.allActive && xiaoxueData.allActive.percentage}}</span></div>
				<div class="userNum bom10">{{xiaoxueData.allActive && xiaoxueData.allActive.count}}</div>
			</div>
		</div>
		<div class="erTitle">数据预警</div>
		<div class="table-title">
			<div class="title-item">城市</div>
			<div class="title-item">地区</div>
			<div class="title-item">学校</div>
			<div class="title-item">付费人数</div>
		</div>
		<ul class="table-content scrollStyle">
			<li class="conten-item" v-for="(item,index) in allData.xiaoXueWarningDataList" :key="'i'+index">
				<div class="item-name ellipsis">{{item.city}}</div>
				<div class="item-name ellipsis">{{item.county}}</div>
				<div class="item-name ellipsis">{{item.school_name}}</div>
				<div class="item-name bigwid">
					<span class="payNum">{{item.prev_count}}</span>
					<span class="ellipsis" :class="item.prev_count < item.count ? 'up-data' : 'pro-data'">{{ item.percentage | parseIntNumber}}</span>
				</div>
			</li>
		</ul>
	</div>
	<div class="Data floatr">
		<div class="title bom20">幼儿</div>
		<div class="clearfix">
			<div class="small-l list bom20">
				<div class="txt bom10">付费用户数</div>
				<div class="small-pro bom10"><span>本省</span> <span class="ellipsis" :class=" youErData.provincePay && (youErData.provincePay.prev_count > youErData.provincePay.count) ? 'pro-data' : 'up-data'">{{youErData.provincePay && youErData.provincePay.percentage}}</span></div>
				<div class="userNum bom30">{{youErData.provincePay && youErData.provincePay.count}}</div>
				<div class="small-pro bom10"><span>全国</span> <span class=" ellipsis"  :class=" youErData.allPay && (youErData.allPay.prev_count > youErData.allPay.count) ? 'pro-data' : 'up-data'">{{ youErData.allPay && youErData.allPay.percentage}}</span></div>
				<div class="userNum bom10">{{youErData.allPay && youErData.allPay.count}}</div>
			</div>
			<div class="small-r list bom20">
				<div class="txt bom10">活跃用户数</div>
				<div class="small-pro bom10"><span>本省</span> <span class="ellipsis"  :class="youErData.provinceActive && (youErData.provinceActive.prev_count > youErData.provinceActive.count) ? 'pro-data' : 'up-data'">{{youErData.provinceActive && youErData.provinceActive.percentage}}</span></div>
				<div class="userNum bom30">{{youErData.provinceActive && youErData.provinceActive.count}}</div>
				<div class="small-pro bom10"><span>全国</span> <span class=" ellipsis"  :class="youErData.allActive && (youErData.allActive.prev_count > youErData.allActive.count) ? 'pro-data' : 'up-data'">{{youErData.allActive && youErData.allActive.percentage}}</span></div>
				<div class="userNum bom10">{{youErData.allActive && youErData.allActive.count}}</div>
			</div>
		</div>
		<div class="erTitle">数据预警</div>
		<div class="table-title">
			<div class="title-item">城市</div>
			<div class="title-item">地区</div>
			<div class="title-item">学校</div>
			<div class="title-item">付费人数</div>
		</div>
		<ul class="table-content scrollStyle">
			<li class="conten-item" v-for="(item,index) in allData.youErWarningDataList" :key="'i'+index">
				<div class="item-name ellipsis">{{item.city}}</div>
				<div class="item-name ellipsis">{{item.county}}</div>
				<div class="item-name ellipsis">{{item.school_name}}</div>
				<div class="item-name bigwid">
					<span class="payNum">{{item.prev_count}}</span>
					<span class="ellipsis"  :class="item.prev_count < item.count ? 'up-data' : 'pro-data'">{{item.percentage | parseIntNumber }}</span>
				</div>
			</li>
		
		</ul>
	</div>
	<div class="line floatl">
		 <div class="tit">近6个月小学付费用户数</div>
		 <div class="chart1">
		   <u-lineEchart 
		   		ref="reference1"
				:keyId="'third1'"  yAxisName="本省" origin="plat"
				:legend="legendList1" :list="lineData.xiaoxue_province" smooth isHasScatter>
			</u-lineEchart>
		 </div>
		  <div class="chart1">
		   <u-lineEchart 
		   		ref="reference2"
				:keyId="'third2'"   yAxisName="全国" origin="plat"
				:legend="legendList1" :list="lineData.xiaoxue_all" smooth isHasScatter>
			</u-lineEchart>
		 </div>
	</div>
	<div class="line floatr">
		 <div class="tit">近6个月幼儿付费用户数</div>
		 <div class="chart1">
		   <u-lineEchart 
				:keyId="'third3'"  yAxisName="本省"  origin="plat"    ref="reference3"
				:legend="legendList1" :list="lineData.youer_province" smooth isHasScatter>
			</u-lineEchart>
		 </div>
		  <div class="chart1">
		   <u-lineEchart 
		   		ref="reference4"
				:keyId="'third4'"  yAxisName="全国" origin="plat"
				:legend="legendList1" :list="lineData.youer_all" smooth isHasScatter>
			</u-lineEchart>
		 </div>
	</div>

	<div class="mask" v-if="isLoading"></div>
	<transition name="sliderRight" mode="out-in">
		<div class="tips" v-show="isLoading">数据加载中...</div>
	</transition>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 如果未在webpack的配置文件中设置bmap外部扩展，不要忘记引入bmap
import 'echarts/extension/bmap/bmap'
import "@/utils/util"
import * as api from '@/api/index'
export default {
	data() {
		return {
			isLoading:false,
			allData:'',
			lineData:'',
			xiaoxueData:{
			
			},
			youErData:{
				
			},
			legendList1:[
                {color:'#FDB628',areaStyleColor:"#FDB628"},
            ],
			currentPro:0,
			province:[
				{
					value:'浙江',
					center:[120.153576,30.287459],
					zoom:9
				},
				{
					value:'海南',
					center:[110.33119,20.031971],
					zoom:9
				},
				{
					value:'江苏',
					center:[119.767413,33.341544],
					zoom:8
				},
				{
					value:'安徽',
					center:[117.283042,31.86119],
					zoom:10
				},
				{
					value:'山东',
					center:[117.000923,36.675807],
					zoom:8
				},
				{
					value:'贵州',
					center:[106.713478,26.578343],
					zoom:10
				},
				{
					value:'湖南',
					center:[112.982279,28.19409],
					zoom:8
				}
			],
			city1:[],
			geoCoordMap:{
				"合肥市": [117.283042,31.86119],
				"安顺市": [105.932188,26.245544],
				"乐东黎族自治县": [109.175444,18.747583],
				"贵阳市":[106.713478,26.578343],
				"屯昌县":[110.102773,19.362916],
				"郑州市":[113.665412,34.757975],
				"永州市":[111.608019,26.434516],
				"连云港市":[119.178821,34.600018],
				"南京市":[118.767413,32.041544],
				"苏州市":[120.619585,31.299379],
				"宿迁市":[118.275162,33.963008],
				"银川市":[106.278179,38.46637],
				"济宁市":[116.587245,35.415393],
				"杭州市":[120.153576,30.287459],
				"嘉兴市":[120.750865,30.762653],
				"金华市":[119.649506,29.089524],
				"丽水市":[119.921786,28.451993],
				"宁波市":[121.549792,29.868388],
				"衢州市":[118.87263,28.941708],
				"台州市":[121.428599,28.661378],
				"温州市":[120.672111,28.000575],
				"阜阳市":[115.819729,32.896969],
				"徐州市":[117.184811,34.261792],
				"湖州市":[120.102398,30.867198]
			},
			center:[120.153576,30.287459],
			zoom:8,
			option:{}
		}
	},
	mounted() {
		this.myChart =  this.$echarts.init(
			document.getElementById('chart1')
		);
		// this.city1.forEach((res)=>{
		// 	this.getLng(res.name).then((res)=>{
		// 		console.log('res',res)
		// 		this.geoCoordMap[res.name] = res
		// 	})
		// })
		// this.convertData()
		
		this.chart1()
		
	},
	filters: {
		parseIntNumber: function (value) {
			return value.replace('-','')
		}
	},
	computed:{
		provinceTxt(){
			switch (this.currentPro) {
				case 0:
					return '浙江省'
					break;
				case 1:
					return '海南省'
					break;
				case 2:
					return '江苏省'
					break;
				case 3:
					return '安徽省'
					break;
				case 4:
					return '山东省'
					break;
				case 5:
					return '贵州省'
					break;
				case 6:
					return '湖南省'
					break;
				default:
					break;
			}
		}
	},

    methods: {
		chosPro(item,index){
			console.log('index',index)
			this.currentPro =index
			this.center =item.center
			this.zoom = item.zoom
			this.chart1()
		},
      	convertData(){
			// var result = [];
			// for (var i = 0; i < this.city1.length; i++) {
			// 	var geoCoord 
			// 	var name = this.city1[i].name
			// 	var value = this.city1[i].value
			// 	this.getLng(this.city1[i].name).then(res=>{
			// 		geoCoord =res
			// 			this.geoCoordMap.push({
			// 				name: name,
			// 				value: geoCoord.concat(value),
			// 				itemStyle:{color:'#00CD86'}
			// 			});
			// 	});
				
			// }
			// console.log('result',this.geoCoordMap)
			// return result;
			var result = [];
			for (var i = 0; i < this.city1.length; i++) {
					let geoCoord
					geoCoord = this.geoCoordMap[this.city1[i].name]
					if (geoCoord) {
						result.push({
							name: this.city1[i].name,
							value: geoCoord.concat(this.city1[i].value),
							itemStyle:{color:'#00CD86'},
							// symbol:function(val){
							// 	return 'image://'+require('@/assets/img/point.png')
								
							// },
							// symbolSize:function(val){
							// 		return [4,51]
							// },
							
						});
					}
				
			}
			console.log(result,"result-312")
			return result;
	  	},
		chart1(){
			this.isLoading = true;
			this.getData().then(res=>{
				this.allData = res
				// res.xiaoXueData.provinceActive.percentage.replace('-','')
				// res.xiaoXueData.allActive.percentage.replace('-','')
				// res.youErData.allActive.percentage.replace('-','')
				// res.youErData.provinceActive.percentage.replace('-','')
				console.log(res)

				this.lineData = res.indexLineData
				this.xiaoxueData = res.xiaoXueData
				
				// console.log(this.lineData,"this.lineData");
				// console.log(this.xiaoxueData,"this.xiaoxueData");
				
				this.youErData = res.youErData
			
				this.city1 =res.provinceCityDataList
				setTimeout(() => {
					this.$refs.reference1.initChart() 
					this.$refs.reference2.initChart() 
					this.$refs.reference3.initChart()
					this.$refs.reference4.initChart()
				}, 20);
				this.option = {
					title: {
					},
					tooltip : {
						trigger: 'item',
						formatter: function (params) {
							let data = params.data.value[2]
							return '<div class="toolStyle" style="border-radius: 10px; width: 240px;height: 274px;background: rgba(21, 26, 35, 0.8);"><div class="head" style="width: 240px;font-size: 20px;height: 40px;line-height: 40px;text-align:center;background: #168DFF;border-radius: 10px;">'+data.title+'</div><div class="small" style="width:100%;height:100px;padding:20px 40px 20px 20px"><div class="tit" style="font-size:16px;">小学</div><div class="labels" style="font-size:14px;color: rgba(255, 255, 255, 0.7);margin-top:10px;display:flex; justify-content: space-between;"><div>付费用户数</div><div>活跃用户数</div></div><div class="data" style="font-size:24px;color:#ffffff;margin-top:10px;display:flex; justify-content: space-between;"><div>'+data.smallPayCount+'</div><div>'+data.smallActiveCount+'</div></div></div><div class="small" style="width:100%;height:100px;padding:20px 40px 20px 20px"><div class="tit" style="font-size:16px;">幼儿</div><div class="labels" style="font-size:14px;color: rgba(255, 255, 255, 0.7);margin-top:10px;display:flex; justify-content: space-between;"><div>付费用户数</div><div>活跃用户数</div></div><div class="data" style="font-size:24px;color:#ffffff;margin-top:10px;display:flex; justify-content: space-between;"><div>'+data.childPayCount+'</div><div>'+data.childActiveCount+'</div></div></div></div>';
						},
						position:'bottom'
					},
					bmap: {
						center: this.center,
						zoom: this.zoom,
						roam: true,
						mapStyle: {
								styleJson: [
								{
									'featureType': 'land',     //调整土地颜色
									'elementType': 'geometry',
									'stylers': {
										'color': '#282e39'
									}
								},
								{
									'featureType': 'building',   //调整建筑物颜色
									'elementType': 'all',
									'stylers': {
									'visibility': 'off'
									}
								},
								{
									'featureType': 'building',   //调整建筑物标签是否可视
									'elementType': 'labels',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'highway',     //调整高速道路颜色
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'arterial',   //调整一些干道颜色
									'elementType': 'all',
									'stylers': {
										'color': '#343b47'
									}
								},
								{
									'featureType': 'arterial',
									'elementType': 'labels',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'green',
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'water',
									'elementType': 'geometry',
									'stylers': {
										'color': '#171e2b'
									}
								},
								{
									'featureType': 'subway',
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'all',     //调整所有的标签的边缘颜色
									'elementType': 'labels.text.stroke',
									'stylers': {
										'color': '#373e4b'
									}
								},
								{
									'featureType': 'all',     //调整所有标签的填充颜色
									'elementType': 'labels.text.fill',
									'stylers': {
										'color': '#cccccc'
									}
								},
								{
									'featureType': 'manmade',
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'local',
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								{
									'featureType': 'railway',
									'elementType': 'all',
									'stylers': {
										'visibility': 'off'
									}
								},
								// {
								// 	"featureType": "town",
								// 	"elementType": "labels",
								// 	"stylers": {
								// 		"visibility": "off"
								// 	}
								// }, 
							]
						},
					},
					series : [
						{
							// name: 'Top 5',
							type: 'effectScatter',
							coordinateSystem: 'bmap',
							data: this.convertData(),
							// symbolSize: function (val) {
							// 	return val[2] / 10;
							// },
							
							showEffectOn: false,
							// rippleEffect: {
							// 	brushType: 'stroke'
							// },
							hoverAnimation: false,
							symbol:function(val){
								return 'image://'+require('@/assets/img/point.png')
								
							},
							symbolSize:function(val){
									return [4,51]
							},
							label: {
								formatter: function (params) {
									return `{b|${params.name}}`
								},
								position: 'top',
								rich: {
									b: {
										backgroundColor: '#168DFF',
										width:'auto',
										height: 20,
										borderRadius: 6,
										lineHeight: 40,
										padding:10,
										fontSize:16,
										color:'#ffffff',
										textAlign:'center'
									},
								},
								show: true
							},
						
							zlevel: 1
						},
						// {
						// type: 'lines',
						// 	coordinateSystem: 'bmap',
						// 	zlevel: 2,
						// 	effect: {
						// 		show: true,
						// 		period: 6,
						// 		trailLength: 0,
						// 		symbol: 'arrow',
						// 		symbolSize: 10
						// 	},
						// 	lineStyle: {
						// 		normal: {
						// 			color:  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						// 				{
						// 					offset: 0,
						// 					color: "#00CD86"
						// 				},
						// 				{
						// 					offset: 1,
						// 					color: "#168DFF"
						// 				}
						// 			]),
						// 			width: 4,
						// 			curveness: 0.2
						// 		}
						// 	},
						// 	//将手动做的一个迁徙数据放入线条的数据部分。
						// 	data: [{
						// 		// fromName: "银泰",
						// 		// toName: "路口",
						// 		coords: [
						// 			[121.4222, 31.218123],
						// 			[121.489934, 31.398896],
									
						// 		]
						// 	}]
						// }

					]
				}
				this.myChart.setOption(this.option);

				this.isLoading = false;
			})
			
			// let that = this
			// that.myChart.on('mouseover', function (params) {
			// 	console.log('000000',that.option.series)
			// 	var dataIndex = params.dataIndex;
			// 	that.option.tooltip.position = 'right'
			// 	that.option.data[dataIndex].series=[
			// 			{
			// 				symbol:function(val){
			// 					return 'image://'+require('@/assets/img/mark.png')
			// 				},
			// 				symbolSize:function(val){
			// 						return [240,120]
			// 				},
			// 				zlevel: 1
			// 			},]
			// 		that.myChart.setOption(that.option)
			//   });
			// that.myChart.on('mouseout', function (params) {
			// 	console.log('000000',dataIndex)
			// 	that.option.series=[
			// 			{
			// 				symbol:function(val,index){
			// 					console.log(val,index)
			// 					if(index !==dataIndex ){
			// 						return 'image://'+require('@/assets/img/point.png')
			// 					}
								
								
			// 				},
			// 				symbolSize:function(val){
			// 						return [4,51]
			// 				},
			// 				label: {
			// 					formatter: function (params) {
			// 						return `{b|${params.name}}`
			// 					},
			// 					position: 'top',
			// 					rich: {
			// 						b: {
			// 							backgroundColor: '#168DFF',
			// 							width:'auto',
			// 							height: 20,
			// 							borderRadius: 6,
			// 							lineHeight: 40,
			// 							padding:10,
			// 							fontSize:16,
			// 							color:'#ffffff',
			// 							textAlign:'center'
			// 						},
			// 					},
			// 					show: true
			// 				},
						
			// 				zlevel: 1
			// 			}]
			// 		that.myChart.setOption(that.option)
          	// });
		},
		getData(){
			return new Promise((reslove,reject)=>{
				api.getindexdata(this.provinceTxt).then(res=>{
					console.log('res',res)
					if(res){
						reslove(res)
					}
				})
			})
			
		},
		//解析经纬度
		getLng(points){
			return  new Promise((resolve, reject) => {
				let map = new BMap.Map("allmap");
				let myGeo = new BMap.Geocoder();
				let geolocation = new BMap.Geolocation();
				var point = []
				myGeo.getPoint(points, function(p){
					if(p){
						point =[p.lat,p.lng]
						resolve(point)
					}else{
						// alert('您选择的地址没有解析到结果！');
					}
				})
			})

		}
    },
}
</script>

<style lang="scss" scoped>
.toolStyle{
	width: 240px;
	height: 274px;
	background: #151A23;
	opacity: 0.8;
	border-radius: 10px;
}
.pagebg{
    width: 100%;
	height: 100%;
	min-width: 100%;
	position: relative;
	background-color: #171e2b;
	overflow: hidden;
	&::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 500px;
		height: 100%;
		background: linear-gradient(270deg, rgba(23, 30, 43, 0) 0%,#171E2B 100%);
		opacity: 1;
	}
	&::before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 500px;
		height: 100%;
		background: linear-gradient(270deg, #171E2B 0%, rgba(23, 30, 43, 0) 100%);
		opacity: 1;
		z-index: 9;
	}
	.topStyle{
		width: 100%;
		height: 190px;
		position:absolute;
		top: 0;
		left: 0;
		z-index: 1001;
		text-align: center;
		.imgbg{
			width: 100%;
			height: 100%;
			background: url('~@/assets/img/topbg.png') no-repeat center;
			background-size:cover;
			position: absolute;
			
		}
		.title{
			color: #FFFFFF;
			font-size: 36px;
			z-index: 99;
			top: 30px;
			position: absolute;
			font-weight: bold;
		}
		.provinceList{
			top: 100px;
			position: absolute;
			text-align: center;
			width: 100%;
			color: #7b87a7;
			cursor: pointer;
			font-size: 20px;
			z-index: 9999;
		}
		.tabs{
			width: 1000px;
			margin: 0 auto;
			.province{
				position: relative;
				margin-right: 60px;
				z-index: 9999;
				display: inline-block;
				width: 50px;
				height: 60px;
				&:last-child{
					margin-right: 0px;
				}
				&:nth-child(2){
					// padding-top: 20px;
				}
				&:hover{
					color: #FFF;
				}
			}
			.whitetxt{
				color: #FFFFFF;
			}
			.txt{
				position: relative;
				.icon{
					display: inline-block;
					width: 50px;
					height: 4px;
					background: linear-gradient(90deg, rgba(87, 107, 149, 0) 0%, #719FFF 52%, rgba(87, 107, 149, 0) 100%);
					opacity: 1;
					position: absolute;
					bottom: -6px;
					left: 0px;
				}
			}
			.top2{
				top:6px;
			}
			.top4{
				top:8px;
			}
			.top6{
				top:10px;
			}
			
		}
	}
	.Data{
		width: 420px;
		height: 560px;
		background: rgba(21, 26, 35, 0.8);
		// opacity: 0.8;
		border-radius: 10px;
		position: absolute;
		// left: 40px;
		top: 140px;
		padding: 20px;
		z-index: 10;
		.title{
			width: 100%;
			text-align: left;
			color: #FFFFFF;
			font-size: 22px;
			height:auto ;
			font-weight: bold;
		}
		.list{
			float: left;
			width: 50%;
			height: auto;
			.txt{
				color: #FFFFFF;
				font-size: 18px;
			}
			.small-pro{
				color: #FFFFFF;
				font-size: 16px;
				display: flex;
    			align-items: center;
				.pro-data{
					color: #00CD86;
					background: url('~@/assets/img/down.png') no-repeat center;
					flex: 1;
					background-position-x: 2px;
					display: inline-block;
					padding-left: 20px;
					margin-left: 10px;
				}
				.up-data{
					color: #FF5E33;
					background: url('~@/assets/img/up.png') no-repeat center;
					flex: 1;
					background-position-x: 2px;
					display: inline-block;
					padding-left: 20px;
					margin-left: 10px;
				}
			}
			.userNum{
				width: 100%;
				height: auto;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 32px;
			}
		}
		.erTitle{
			color: #FFFFFF;
			font-size: 20px;
			margin-bottom: 10px;
		}
		.table-title{
			width: 100%;
			height: 36px;
			line-height: 36px;
			padding: 0 10px;
			background-color: rgba(255, 255, 255, 0.1);
			display: flex;
			font-size: 16px;
			color: #FFFFFF;
			margin-bottom: 1px;
			.title-item{
				min-width: 70px;
			}
		}
		.table-content{
			width: 100%;
			height: 235px;
			overflow-y: auto;
			.conten-item{
				width: 100%;
				height: 35px;
				// display: flex;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				line-height: 35px;
				margin-bottom: 1px;
				padding: 0 10px;
				
				&:nth-child(2n+1){
					background-color: rgba(255, 255, 255, 0.05);
				}
				.item-name{
					width: 70px;
					// display: flex;
					float: left;
					.pro-data{
						color: #00CD86;
						background: url('~@/assets/img/down.png') no-repeat center;
						flex: 1;
						font-size: 12px;
						background-position-x: 2px;
						display: inline-block;
						padding-left: 20px;
						margin-left: 10px;
					}
					.up-data{
						color: #FF5E33;
						background: url('~@/assets/img/up.png') no-repeat center;
						flex: 1;
						font-size: 12px;
						background-position-x: 2px;
						display: inline-block;
						padding-left: 20px;
						margin-left: 10px;
					}
				}
				.bigwid{
					width: 150px;
					display: flex;
					padding-left: 10px;
					.payNum{
						display: inline-block;
						width: 55px;
					}
				}
			}
		}
	}
	.floatl{
		left: 40px;
	}
	.floatr{
		
		right: 40px;
	}
	.line{
		width: 600px;
		height: 200px;
		background: rgba(21, 26, 35, 0.8);
		border-radius: 10px;
		position: absolute;
		bottom: 20px;
		z-index: 10;
		display: flex;
		flex-direction: row;
		.tit{
			font-size: 20px;
			color: #FFFFFF;
			font-weight: bold;
			padding: 20px 20px 0px;
			position: absolute;

		}
		.chart1 /deep/{
			flex: 1;
			width: 250px;
			height: 200px;
			margin-top: 20px;
			display: inline-block;
			padding-right: 20px;
			.toolStyle{
				width: 240px;
				height: 274px;
				background: #151A23;
				opacity: 0.8;
				border-radius: 10px;
			}
		}
	}
}
.tips{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 180px;
	height: 80px;
	margin-left: -90px;
	margin-top: -40px;
	line-height: 40px;
	text-align: center;
	background: #FFF;
	padding:20px 40px;
	border-radius: 10px;
	font-size: 16px;
	z-index: 1002;
}
.sliderRight-enter-active {
    animation-name: fadeInRight;
    animation-duration: .5s;
}

.sliderRight-leave-active {
    animation-name: fadeOutLeft;
    animation-duration: .5s;
}
</style>